<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-05-06 23:09:53
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-07-08 17:16:32
 * @FilePath: /data-center-web-update/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-config-provider :locale="locale" :size="size">
        <!-- 开启水印 -->
        <el-watermark
            v-if="watermarkEnabled"
            :font="{ color: fontColor }"
            :content="defaultSettings.watermarkContent"
            class="wh-full"
        >
            <router-view />
        </el-watermark>
        <!-- 关闭水印 -->
        <router-view v-else />
    </el-config-provider>
</template>

<script setup lang="ts">
import { useAppStore, useSettingsStore } from '@/store';
import defaultSettings from '@/settings';
import { ThemeEnum } from '@/enums/ThemeEnum';
import { SizeEnum } from '@/enums/SizeEnum';

const appStore = useAppStore();
const settingsStore = useSettingsStore();

const locale = computed(() => appStore.locale);
const size = computed(() => appStore.size as SizeEnum);
const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);

// 明亮/暗黑主题水印字体颜色适配
const fontColor = computed(() => {
    return settingsStore.theme === ThemeEnum.DARK
        ? 'rgba(255, 255, 255, .15)'
        : 'rgba(0, 0, 0, .15)';
});
</script>
